<template>
  <div class="shoping">
    <main class="animated">
      <div class="cent">购物</div>
      <img src="../../public/image/testimonial-bg.jpg" alt="玫瑰" width="1519px" class="lbt" />
    </main>
    <!-- bounceInRight  bounceInLeft  待加入的动画 -->
    <div class="container animated">
      <div class="centent">
        <div class="shopping-left">
          <div>
            <img :src="shoppingImg" width="555px" height="720px" alt="" />
          </div>
          <div class="img-3">
            <div>
              <img src="../../public/picture/cart-1.jpg" alt="" width="174px" height="219px" />
            </div>
            <div>
              <img src="../../public/picture/cart-2.jpg" alt="" width="174px" height="219px" />
            </div>
            <div>
              <img src="../../public/picture/cart-3.jpg" alt="" width="174px" height="219px" />
            </div>
          </div>
        </div>
        <div class="shopping-right">
          <h3>{{shoppingName}}</h3>
          <p class="color-666">SKU：501</p>
          <p class="color-666">
            <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
              class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
            <i class="iconfont icon-xing icon-ora"></i>
            无评论
          </p>
          <div class="sop-price">
            <span class="price">{{'￥' + shoppingPrice}}</span>
            <span class="del">$29.00</span>
            <span class="yl">-34%</span>
          </div>
          <p class="sm">
            我们认为他们是值得的，他们指责那些憎恨义人的人，但实际上，他们因当下的奉承和快乐的享受而败坏了，
            他们因这些痛苦的丘比特而蒙蔽了眼睛，而他没有预见到全民的麻烦，那些舍弃了将军的精神，在精神上是卑鄙的人的职责，
            是在同一章中。
          </p>
          <ul>
            <li><i class="iconfont icon-chicun- icon-3"></i>尺寸指南</li>
            <li><i class="iconfont icon-head-transport icon-3"></i>运输</li>
            <li>
              <i class="iconfont icon-xiaoxixinxiduanxintixingyoujiantongzhisixin icon-3"></i>询问有关该产品
            </li>
          </ul>
          <div class="count">
            数量:
            <div class="yuns">
              <i class="iconfont icon-jian"></i>
              <span>1</span>
              <i class="iconfont icon-jia"></i>
            </div>
          </div>
          <div class="goumai">
            <button>添加到购物车</button>
            <a class="dz" href=""> <i class="iconfont icon-weibiaoti-"></i></a>
          </div>
          <div class="sopcar">
            <p><input type="checkbox" />我同意条款和条件</p>
            <button>立即购买</button>
          </div>
        </div>
      </div>

      <!-- 描述模块 -->
      <div class="shopping-ms">
        <p>
          <span @click="show1()">描述</span><span @click="show2()">评论</span>
        </p>
        <div v-show="ispl == 0">
          我们认为他们是值得的，他们指责那些憎恨正义者的人，但实际上，他们因当下的奉承和快乐的享受而败坏了，
          他们因这些痛苦的丘比特而蒙蔽了眼睛，为此他没有预见到全民的麻烦，那些舍弃了将军的精神，以及在同一个章节上心甘情愿的人的职责，
          就是在同一章中。但这需要简单容易的区分。对于您的空闲时间，它们独立于我们，最重要的是，在选择何时使他们无能为力时选择它是一件很令人
          愉快的事情，不是这样，每一种乐趣都应受到欢迎，每一种痛苦都可以避免。但是，在某些情况下以及履行职责的需要时，
          经常会发生这样的情况：必须拒绝享乐，或者避免对某些未被接受的事物产生愉悦和烦恼。被选为这些事情的人
          ，因此，必须注意一个明智的人，他应该要么拒绝享乐以确保其他更大的人，要么他忍受痛苦以避免更糟的痛苦。
          在一个空闲的小时中，当我们的选择权受到限制，并且没有任何事情妨碍我们能够做到自己最喜欢的事情时，每一
          种快乐都将受到欢迎，而每一次痛苦都将得到避免。但是在某些情况下，由于要求履行职责或承担商业义务，
          经常​​会发生这样的情况，必须放弃享乐并接受烦恼。因此，智者在这些问题上始终坚持选择的原则：他拒绝享乐以获取其
          他更大的享乐，否则他忍受痛苦以避免痛苦的加重。
        </div>
        <div class="pl" v-show="ispl == 1">
          <div class="sop-pl">
            <ul>
              <li>
                <div class="border1">
                  <h6>木玫瑰</h6>
                  <p class="pl-p1">
                    <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                      class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                    <i class="iconfont icon-xing icon-ora"></i>2020年10月20日
                  </p>
                  <p class="pl-p2">
                    Proin bibendum dolor ametAccumsan Integer
                    nisl，或柔软，已灭菌。各种临床Penatibus超级碗，维维拉
                  </p>
                </div>
                <div class="fbpl">
                  <div class="top">
                    <label for="">
                      <p class="sop-name">名称</p>
                      <input type="text" placeholder="输入你的名字" />
                    </label>
                    <label for="">
                      <p class="sop-name">电子邮件</p>
                      <input type="text" placeholder="输入你的邮件" />
                    </label>
                  </div>
                  <label for="">
                    <p>评分</p>
                    <span class="pl-p1">
                      <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                        class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                      <i class="iconfont icon-xing icon-ora"></i>
                    </span>
                  </label>
                  <label for="">
                    <p>评论结构(1500)</p>
                    <textarea name="" id="" cols="30" rows="10" placeholder="在这里写下你的评论"></textarea>
                  </label>
                  <button>提交</button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 相关产品 -->
      <div class="shopping-xg">
        <div class="zy-bt">
          <h2>相关产品</h2>
          <p>
            创造力，能量，沟通，幸福和爱的完美结合。让我们为您安排一个微笑。
          </p>
        </div>
        <div class="zy-rbt">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in pro" :key="index" style="width: 271px; height: 441px">
                <div class="pro-icon4 animated fadeInRight">
                  <div><i class="iconfont icon-shangpindaizi icon4"></i></div>
                  <div><i class="iconfont icon-iconbijiao icon4"></i></div>
                  <div><i class="iconfont icon-xinaixin icon4"></i></div>
                  <div><i class="iconfont icon-yanjing icon4"></i></div>
                </div>
                <img :src="item.img" alt="" width="271px" height="339px" />
                <div id="zy-lbt">
                  <p>
                    <i class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i><i
                      class="iconfont icon-xing icon-ora"></i><i class="iconfont icon-xing icon-ora"></i>
                    <i class="iconfont icon-xing icon-ora"></i>
                  </p>
                  <p class="zy-p14">{{ item.name }}</p>
                  <p class="zy-red">
                    {{ item.price }}
                    <span class="zy-del">{{ item.delect }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  * {
    box-sizing: border-box;
  }
input,button{
  border: none;
}
  .icon-3 {
    color: #000000;
    display: inline-block;
    margin-right: 10px;
    font-size: 17px;
  }

  .color-666 {
    font-size: 14px;
    color: #666666;
    margin: 0;

    i {
      color: #FF9800;
      font-size: 13px;
      margin: 0;
    }
  }

  // 轮播图
  .swiper-container {
    width: 100%;
    height: auto;
    padding: 30px 0;
    margin-left: auto;
    margin-right: auto;
  }

  .pro-icon4 {
    display: none;
    width: 45px;
    height: 204px;
    position: absolute;
    top: 10px;
    right: 10px;

    div {
      background-color: white;
      width: 45px;
      height: 45px;
      margin-bottom: 6px;
      border-radius: 50%;
      text-align: center;
      line-height: 46px;

      .icon4 {
        font-size: 18px;

        &:hover {
          color: #f34f3f;
        }
      }
    }
  }

  .swiper-slide {
    width: 271px !important;
    text-align: center;
    font-size: 18px;
    flex-wrap: wrap;
    background: #fff;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: all;

    &:hover .pro-icon4 {
      display: block;
    }
  }

  .icon-ora {
    color: #FF9800;
    font-size: 13px;
    margin: 0 2px;
  }

  .zy-p14 {
    margin-top: 5px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: #222222;
    transition: all 0.3s linear;
    font-family: "Rubik", sans-serif;
  }

  .zy-red {
    margin-top: 5px;
    font-weight: 500;
    font-size: 15px;
    color: #f34f3f;
  }

  .zy-del {
    text-decoration: line-through;
    font-weight: 400;
    font-size: 12px;
    margin-left: 5px;
    color: #666666;
  }

  main {
    position: relative;

    .cent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #222222;
      font-size: 42px;
      font-family: "Lora", serif;
    }
  }

  .centent {
    display: flex;
  }

  .container {
    width: 1200px;
    min-height: 1540px;
    padding-top: 50px;

    .shopping-left {
      width: 50%;

      .img-3 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
          .visited-red {
            border: 2px solid #f34f3f;
          }

          margin-top: 20px;
        }
      }
    }

    .shopping-right {
      padding: 0 24px;

      h3 {
        text-transform: capitalize;
        font-size: 25px;
        margin-bottom: 10px;
        font-weight: 400;
        color: #222222 !important;
        line-height: 20px;
        font-family: "Rubik", sans-serif;
      }

      .sop-price {
        height: 40px;
        margin: 10px 0 20px 0;

        .price {
          font-weight: 500;
          font-size: 23px;
          color: #f34f3f;
          margin-left: 5px;
        }

        .del {
          display: inline-block;
          text-decoration: line-through;
          font-weight: 400;
          font-size: 20px;
          margin-left: 5px;
          color: #222222;
          // background-color: #C8C8C8;
          margin-right: 6px;
        }

        .yl {
          background: #f34f3f;
          color: #fff;
          padding: 3px 16px;
          margin-top: 4px;
          margin-right: 6px;
        }
      }

      ul {
        margin-top: 30px;

        li {
          display: inline-block;
          margin-right: 30px;

          &:hover {
            color: #f34f3f;
          }

          &:hover .icon-3 {
            color: #f34f3f;
          }
        }
      }

      .count {
        height: 85px;
        padding-top: 43px;
        display: flex;
        color: black;

        .yuns {
          color: #666666;
          font-size: 14px;
          display: flex;
          margin-left: 35px;
          justify-content: space-between;
          width: 212px;
          height: 42px;
          border-bottom: 2px solid #cccccc;
        }
      }

      .goumai {
        height: 92px;
        padding-top: 40px;

        button {
          width: 283px;
          height: 40px;
          padding: 0 35px;
          color: white;
          border-radius: 5px;
          background-color: #f34f3f;

          &:hover {
            background-color: #3E444A;
          }
        }

        .dz {
          display: inline-block;
          border-radius: 50%;
          width: 42px;
          height: 42px;
          line-height: 42px;
          border-radius: 50%;
          background-color: #f34f3f;
          color: #ffffff;
          text-align: center;
          margin-left: 35px;

          &:hover {
            background-color: #3E444A;
          }
        }
      }

      .sopcar {
        height: 130px;
        padding-top: 45px;

        p {
          margin-bottom: 8px;
        }

        button {
          opacity: 0.6;
          max-width: 400px;
          width: 100%;
          height: 40px;
          line-height: 38px;
          font-size: 16px;
          border-radius: 3px;
          font-weight: 300;
          background-color: #f34f3f;
          color: #ffffff;
          outline: none;
        }
      }
    }

    .shopping-ms {
      max-height: 814px;
      border: 1px solid #e1e1e1;
      padding: 20px 30px 27px;
      margin-top: 100px;

      &>p {
        text-align: center;
        // border-bottom: 1px solid #e1e1e1;
        padding-bottom: 15px;

        span {
          font-size: 20px;
          font-weight: 500;
          display: inline-block;
          margin-right: 35px;

          &:hover {
            color: #f34f3f;
          }
        }
      }

      // 评论模块
      .pl {
        // 最后一个不添加
        /*   .border1 {
        // border-bottom: 1px solid #e1e1e1;
      } */

        .pl-p1 {
          text-align: left;
          border: none;
          padding: 0;
          margin-bottom: 8px;
        }

        .pl-p2 {
          text-align: left;
          padding: 0;
          margin-bottom: 20px;
          border: none;
        }

        .fbpl {
          margin-top: 8px;

          .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            width: 100%;

            label {
              width: 48%;

              p {
                line-height: 1;
                margin-bottom: 8px;
                font-weight: 400;
                text-transform: capitalize;
                font-size: 13px;
                border: none;
              }

              input {
                border: 1px solid #e5e5e5;
                color: #7e7e7e;
                border-radius: 0;
                background-color: #ffffff;
                margin-bottom: 0;
                padding: 0px 15px;
                max-width: 100%;
                width: 100%;
                font-size: 14px;
                height: 40px;
                font-weight: 400;
                color: #222222;
              }
            }
          }

          &>label {
            p {
              font-size: 13px;
              margin: 0;
              padding-bottom: 8px;
            }

            width: 100%;
          }

          textarea {
            width: 100%;
            padding: 0 15px;
            border: 1px solid #e1e1e1;
            outline: none;
          }

          button {
            background-color: #343a40;
            border-color: #343a40;
            color: #ffffff;
            display: inline-block;
            position: relative;
            overflow: hidden;
            font-size: 14px;
            font-weight: 700;
            padding: 0px 35px;
            height: 50px;
            line-height: 48px;
            cursor: pointer;
          }
        }
      }

      div {
        font-weight: 300;
      }
    }

    .shopping-xg {
      .zy-bt {
        text-align: center;
        width: 1152px;
        margin: 0 auto;
        padding-top: 90px;
        display: flex;
        justify-content: center;
        flex-flow: column wrap;

        h2 {
          margin-bottom: 22px;
          font-size: 40px;
          line-height: 48px;
          font-weight: 300;
          color: #222222;
        }
      }

      .zy-rbt {
        height: 496px;
      }
    }
  }
</style>
<script>
import shop from '@/shop.js';
  export default {
    data() {
      return {
        ispl: 0,
        istrue: true,
        shoppingImg:'',
        shoppingName:'',
        shoppingPrice:'',
        pro: [{
            img: "picture/product-1.jpg",
            name: "春天雪花",
            price: "$19",
            delect: "$29",
          },
          {
            img: "picture/product-2.jpg",
            name: "岩皂",
            price: "$50",
            delect: "",
          },
          {
            img: "picture/product-3.jpg",
            name: "猩红圣人",
            price: "$39",
            delect: "$60",
          },
          {
            img: "picture/product-4.jpg",
            name: "毛地黄花",
            price: "$79",
            delect: "",
          },
          {
            img: "picture/product-5.jpg",
            name: "夏日美味",
            price: "$40",
            delect: "$85",
          },
          {
            img: "picture/product-7.jpg",
            name: "野玫瑰",
            price: "$19",
            delect: "$21",
          },
          {
            img: "picture/product-8.jpg",
            name: "甜香雪球",
            price: "$50",
            delect: "",
          },
          {
            img: "picture/product-9.jpg",
            name: "Ity下棕榈",
            price: "$19",
            delect: "$29",
          },
          {
            img: "picture/product-6.jpg",
            name: "棕榈皇后",
            price: "$19",
            delect: "$29",
          },
        ],
        pl: [{}, {}],
      };
    },
    methods: {
      show1() {
        this.ispl = 0;
      },
      show2() {
        this.ispl = 1;
      },
    },
    mounted() {
       window.scrollTo(0,500);
        shop.$on("shopcar", (data) => { 
        // console.log(data)
        this.shoppingImg = data.img;
        this.shoppingName = data.name;
        this.shoppingPrice = data.price;
      });
      var swiper = new Swiper(".swiper-container", {
        loop: true,
        speed: 2500,
        slidesPerView: 7,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        on: {
          setTranslate: function () {
            var slides = this.slides;
            for (var i = 0; i < slides.length; i++) {
              var slide = slides.eq(i);
              var progress = slides[i].progress;
              //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
              slide.css({
                opacity: "",
                background: "",
              });
              slide.transform(""); //清除样式

              if (this.effect == 1) {
                slide.transform("scale(" + (1 - Math.abs(progress) / 8) + ")");
              } else if (this.effect == 2) {
                slide.css("opacity", 1 - Math.abs(progress) / 6);
                slide.transform(
                  "translate3d(0," + Math.abs(progress) * 20 + "px, 0)"
                );
              } else if (this.effect == 3) {
                slide.transform("rotate(" + progress * 30 + "deg)");
              } else if (this.effect == 4) {
                slide.css(
                  "background",
                  "rgba(" +
                  (255 - Math.abs(progress) * 20) +
                  "," +
                  (127 + progress * 32) +
                  "," +
                  Math.abs(progress) * 64 +
                  ")"
                );
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    },
  };
</script>